// 颜色变量
$primary-color: #1890ff;
$primary-color-hover: #40a9ff;
$primary-color-active: #096dd9;

$success-color: #52c41a;
$warning-color: #faad14;
$error-color: #f5222d;

$text-color: #333;
$text-color-secondary: #666;
$text-color-disabled: #999;

$border-color: #e8e8e8;
$border-color-light: #f0f0f0;
$background-color: #f0f2f5;
$background-color-light: #f8f9fa;

// 字体变量
$font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
$font-size-base: 14px;
$font-size-lg: 16px;
$font-size-sm: 12px;
$font-size-xs: 10px;

$font-weight-normal: 400;
$font-weight-medium: 500;
$font-weight-semibold: 600;
$font-weight-bold: 700;

// 间距变量
$spacing-xs: 4px;
$spacing-sm: 8px;
$spacing-md: 16px;
$spacing-lg: 24px;
$spacing-xl: 32px;
$spacing-xxl: 48px;

// 圆角变量
$border-radius-sm: 4px;
$border-radius-base: 6px;
$border-radius-lg: 8px;
$border-radius-xl: 12px;
$border-radius-xxl: 16px;

// 阴影变量
$box-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
$box-shadow-base: 0 4px 12px rgba(0, 0, 0, 0.1);
$box-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
$box-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.1);

// 断点变量
$breakpoint-xs: 575px;
$breakpoint-sm: 767px;
$breakpoint-md: 991px;
$breakpoint-lg: 1199px;
$breakpoint-xl: 1599px;

// 布局变量
$header-height: 64px;
$sidebar-width: 240px;
$sidebar-collapsed-width: 80px;

// 动画变量
$transition-duration: 0.3s;
$transition-timing: ease-in-out;

// 混合器
@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

@mixin flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@mixin text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin text-ellipsis-multi($lines: 2) {
  display: -webkit-box;
  -webkit-line-clamp: $lines;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@mixin responsive($breakpoint) {
  @if $breakpoint == xs {
    @media (max-width: $breakpoint-xs) { @content; }
  } @else if $breakpoint == sm {
    @media (max-width: $breakpoint-sm) { @content; }
  } @else if $breakpoint == md {
    @media (max-width: $breakpoint-md) { @content; }
  } @else if $breakpoint == lg {
    @media (max-width: $breakpoint-lg) { @content; }
  } @else if $breakpoint == xl {
    @media (max-width: $breakpoint-xl) { @content; }
  }
}

@mixin hover-effect {
  transition: all $transition-duration $transition-timing;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: $box-shadow-lg;
  }
}

@mixin card-style {
  background: #fff;
  border-radius: $border-radius-xl;
  box-shadow: $box-shadow-sm;
  border: 1px solid $border-color-light;
}

@mixin button-style {
  border-radius: $border-radius-base;
  font-weight: $font-weight-medium;
  transition: all $transition-duration $transition-timing;
  
  &:hover {
    transform: translateY(-1px);
  }
} 